class banner {
    constructor(newPic, btnPrev, btnNext, lis) {
        this.index = 0;
        this.obox = newPic;
        this.obtnPrev = btnPrev;
        this.obtnNext = btnNext;
        this.olis = lis;
        this.obox.style.backgroundImage = `url(../images/0.jpg)`;
        this.olis[this.index].style.backgroundColor = "red";

    }
    setBgcImg() {
        this.obox.style.backgroundImage = `url(../images/${this.index}.jpg)`;
    }
    setBgcLis() {
        for (let i = 0; i < olis.length; i++) {
            if (this.index == i) {
                this.olis[i].style.backgroundColor = "red";
            } else {
                this.olis[i].style.backgroundColor = "";
            }
        }
    }
    next() {
        this.index++;
        if (this.index == this.olis.length) {
            this.index = 0;
        }
        this.setBgcImg();
        this.setBgcLis();
    }
    prev() {
        this.index--;
        if (this.index == -1) {
            this.index = this.olis.length - 1;
        }
        this.setBgcImg();
        this.setBgcLis();
    }
    clickLi() {
        let that = this;
        for (let i = 0; i < this.olis.length; i++) {
            this.olis[i].onclick = function () {
                that.index = i;
                that.setBgcImg();
                // that.setBgcLis();
            }
        }
    }
    auto() {
        let that = this;
        let time = null;
        time = setInterval(function () {
            that.next();
        }, 1500);
        that.obox.onmouseover = function () {
            clearInterval(time);
        }
        that.obox.onmouseout = function () {
            time = setInterval(function () {
                that.next();
            },1500);
        }
    }
    eventBind() {
        let that = this;
        this.obtnNext.onclick = function () {
            that.next();
        }
        this.obtnPrev.onclick = function () {
            that.prev();
        }
        this.clickLi();

    }
}

let obox = document.querySelector(".box");
let obtns = document.querySelectorAll("button");
let olis = document.querySelectorAll("li");

let b = new banner(obox, obtns[0], obtns[1], olis);
b.eventBind();
b.auto();











// 点击返回顶部
$(".fanhuian1").click(function () {
    $(window).scrollTop(0)
})